
import React from 'react';
import Avatar from ".";
import avatar1 from 'assets/images/avatar01.jpg';
import avatar2 from 'assets/images/avatar02.jpg';
import avatar3 from 'assets/images/avatar03.jpg';
import avatar4 from 'assets/images/avatar04.jpg';


const AvatarStory = {
    title: 'UI组件/Avatar',
    component: Avatar
};
export default AvatarStory;

export const Default = () => {
    return <Avatar src={avatar1} status='online' />;
}

export const Sizes = () => {
    return (
        <div className='row-elements'>
            <Avatar src={avatar1} size="48px" />
            <Avatar src={avatar2} size="64px" />
            <Avatar src={avatar3} size="80px" />
            <Avatar src={avatar4} size="96px" />
        </div>
    );
}

export const WithStatus = () => {
    return (
        <div className='row-elements'>
            <Avatar src={avatar1} status='online' statusIconSize='8px' size="48px" />
            <Avatar src={avatar2} status='offline' statusIconSize='10px' size="64px" />
            <Avatar src={avatar3} status='offline' statusIconSize='14px' size="80px" />
            <Avatar src={avatar4} status='online' statusIconSize='16px' size="96px" />
        </div>
    );
}